   // 1.1 获取裁剪区域的 DOM 元素
   let $image = $(".container img");

   // 1.2 配置选项
   let options = {
       // 纵横比
       aspectRatio: 1,
       preview: ".preview",
   };

   // 1.3 创建裁剪区域
   $image.cropper(options);

   $('#btnChooseImage').on('click',function(){
    $('#file').click()
   })

   $('#file').change(function(){
        const file = this.files[0] 
        // console.log(file);
        //当file不存在，点击取消file就是undefined，阻止后续代码执行
        if(!file) return
        
    //将文件对象转化为了地址
        const url = URL.createObjectURL(file)
        // console.log(url);

        $image.cropper('destroy').attr('src', url).cropper(options);

    })

// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    // console.log(dataURL);
    // axios
    // 数据 就是avatar=base64的字符串  需要对base64 字符串进行编码处理
    // "avatar=" + encodeURIComponent(dataURL)
    axios
        .post(`/my/update/avatar`, "avatar=" + encodeURIComponent(dataURL))
        .then(({data:{status,message}}) => {
            // 提示
            if (status!== 0) {
                // 失败
                return layer.msg("更新头像失败");
            }

            layer.msg("更新头像成功");
            // 页面中的头像发生变化（更新）
            window.parent.getUserInfo();
    	});
});